import React, { Component } from "react";
import GotService from '../../services/gotService';
import ItemList from "../itemList";
import CharDetails, { Field } from "../charDetails/charDetails";
import ErrorMessage from "../errorMessage/errorMessage";
import RowBlock from "../rowBlock/RowBlock";



export default class CharacterPage extends Component {

    GotService = new GotService();

    state = {
        selectedChar: 130,
        error: false,
    }

    //функционал определения персонажа которого выбрали и определение его по id
    onItemSelected = (id) => {
        this.setState({
            selectedChar: id,
        })
    }

    componentDidCatch() {
        this.setState({
            error: true,
        })
    }


    render() {

        if (this.state.error) {
            return <ErrorMessage />
        }

        const itemList = (
            <ItemList
                onItemSelected={this.onItemSelected}
                getData={this.GotService.getAllCharacters}
                renderItem={(item) => item.name}
            />
        )

        const charDetails = (
            <CharDetails
                charId={this.state.selectedChar} >
                <Field field='gender' label='Gender' />
                <Field field='born' label='Born' />
            </CharDetails>
        )

        return (
            <RowBlock left={itemList} right={charDetails} />
        )
    }
}
